<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../css/layui.css" media="all">
		<link rel="stylesheet" type="text/css" href="../../UI/layui-v2.3.0-rc1/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../dist/formSelects-v4.css" />
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<script type="text/javascript" src="../../js/jquery.form.js"></script>
		<!--<script charset="utf-8" src="../../kindeditor/kindeditor.js"></script>
		<script charset="utf-8" src="../../kindeditor/lang/zh_CN.js"></script>-->
	</head>

	<body>

		<div class="layui-container">

			<div class="layui-row">

				<div id="app">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>添加上机</legend>
					</fieldset>
					<form enctype="multipart/form-data" id="fm" class="layui-form layui-col-lg-offset3" lay-filter="test1">
						<div class="layui-tab">

							<ul class="layui-tab-title">
								<li class="layui-this">基本信息</li>
							</ul>

							<div class="layui-tab-content">

								<div id="set1" class="layui-tab-item layui-show" style="margin-top: 10px;">
									<!--<div class="layui-tab-item layui-show">
						1. 高度默认自适应，也可以随意固宽。
						<br>2. Tab进行了响应式处理，所以无需担心数量多少。
					</div>-->

									<div class="layui-form-item">

										<label class="layui-form-label">实验名</label>
										<div class="layui-input-inline">
											<select name="expId" lay-verify="required" lay-search="" title="实验名">
												<option value=""></option>
												<template v-for="exp in expList">
													<option :value="exp.expId">{{exp.expName}}</option>
												</template>
											</select>
											<!--<input type="text" name="expName" class="layui-input" >-->
										</div>
									</div>

									<!--<div class="layui-form-item">
										<label class="layui-form-label">班级名</label>
										<div class="layui-input-inline">
											<select name="claId" lay-verify="required" lay-search="">
												<option value=""></option>
												<template v-for="cla in classes">
													<option :value="cla.claId">{{cla.claGrade}}级{{cla.claName}}</option>
												</template>
											</select>
										</div>
									</div>-->

									<div class="layui-form-item" >
										<label class="layui-form-label">班级名</label>
										<div class="layui-input-block" style="width:250px;">
											<select name="claList" xm-select="select15_2" title="班级名" >
												<option value="">请选择班级</option>
											</select>
										</div>
									</div>

									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">实验地点</label>
											<div class="layui-input-inline">
												<input type="text" name="expLocation" class="layui-input" title="实验地点">
											</div>
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">上课时间</label>
											<div class="layui-input-inline">
												<input type="text" class="layui-input" id="test5" name="beginTime" placeholder="yyyy-MM-dd HH:mm:ss" title="上课时间">
											</div>
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">下课时间</label>
											<div class="layui-input-inline">
												<input type="text" class="layui-input " id="test6" name="endTime" placeholder="yyyy-MM-dd HH:mm:ss" title="下课时间">
											</div>
										</div>
									</div>
									<input type="text" id="uid" name="uid" style="display: none" :value="getUid()">
									<div class="layui-input-block">
										<button class="layui-btn" type="button" @click="addExp()" lay-filter="">立即提交</button>
										<button type="reset" class="layui-btn layui-btn-primary">重置</button>
									</div>
								</div>

							</div>

						</div>
					</form>

				</div>
			</div>
		</div>

		<script src="../../layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script src="../../UI/jquery-v3.2.1.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../UI/layui-v2.3.0-rc1/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery.cookie.js"></script>
		<script>
			$.ajax({
				type: "get",
				url: "http://localhost:8080/teacher/experiment/nothing.do",
				async: false,
				dataType: "json",
				data: {
					uid: $.cookie("uid")
				},
				success: function(data) {
					//alert(data.info);
					if(data.info == '404') {
						window.location.href = "../login/teacherlogin.html";
					}
				}
			});
			$.ajax({
				url: "http://localhost:8080/teacher/class/list.do",
				async: false,
				dataType: "json",
				type: "get",
				data: {
					uid: $.cookie("uid")
				},
				success: function(data) {
					classes = data;
					console.log(data);
				},
				error: function(data) {

					classes = data;
					//console.log(classes);
				}
			});
			var formSelects = layui.formSelects;
			formSelects.data('select15_2', 'server', {
				url: 'http://localhost:8080/teacher/operate/grade.do?uid=' + $.cookie("uid"),
				linkage: true,
				linkageWidth: 50,
			});
			var selectDatas;
			formSelects.on('select15_2', function(id, vals, val, isAdd, isDisabled) {
				//id:           点击select的id
				//vals:         当前select已选中的值
				//val:          当前select点击的值
				//isAdd:        当前操作选中or取消
				//isDisabled:   当前选项是否是disabled
				console.log(JSON.stringify(vals));
				selectDatas = JSON.stringify(vals);

			}, true);
			var classes;
			var expList;

			$.ajax({
				url: "http://localhost:8080/teacher/experiment/showExperiments.do",
				async: false,
				dataType: "json",
				type: "get",
				data: {
					uid: $.cookie("uid")
				},
				success: function(data) {
					expList = data;
				}
			});
			console.log(expList);
			var vue = new Vue({
				el: "#app",
				data: {
					classes: classes,
					expList: expList,
					selectgrade: 0,

				},
				computed: {

				},
				methods: {
					addExp: function() {
						var form = new FormData(document.getElementById("fm"));
						var myform = document.getElementById("fm");
						var bool = false;
						if(selectDatas == "[]" || selectDatas == null) {							
							bool = true;
							//alert(selectDatas);
							layer.msg("班级不能为空！", {
										time: 2000,
										btn: ["关闭"]
									});
							//alert(bool);
						}
						//非空判断
						for(var i = 0; i < myform.length; i++) { //循环form表单
								if(myform.elements[i].value == "" && myform.elements[i].title != "班级名" && myform.elements[i].name != "claList" && myform.elements[i].name != "") { //判断每一个元素是否为空
									//console.log(myform.elements[i]);
									layer.msg(myform.elements[i].title + "不能为空！", {
										time: 2000,
										btn: ["关闭"]
									});
									myform.elements[i].focus(); //元素获得焦点
									bool=true;
									return;
								}
							}
						if(!bool) {														
								$.ajax({
									url: "http://localhost:8080/teacher/operate/add.do",
									type: "post",
									data: form,
									dataType: 'json',
									processData: false,
									contentType: false,
									success: function(data) {
										//window.clearInterval(timer);
										//console.log("over..");
										console.log(data);
										if(data == "success") {
											layer.msg("上机添加成功");
											window.location.href = "operateList.html";
										} 
										if(data=="false") {
											layer.msg("因部分班级已经添加上机，上机添加失败");											
										}
									},
									error: function(e) {
										//alert("错误！！");
										//window.clearInterval(timer);
									}
								});
							}

						

					},
					showgrade: function() {

						console.log(this.selectgrade);
					},
					getUid: function() {
						//alert($.cookie("uid"));
						return $.cookie("uid");
					}

				}
			});
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;

				//日期
				laydate.render({
					elem: '#date'
				});
				laydate.render({
					elem: '#date1'
				});
				laydate.render({
					elem: '#test5',
					type: 'datetime'
				});
				//日期时间选择器
				laydate.render({
					elem: '#test6',
					type: 'datetime'
				});

				//创建一个编辑器
				var editIndex = layedit.build('LAY_demo_editor');
				form.on('select(test)', function(data) {
					//console.log(data);
					vue.selectgrade = data.value;
					console.log(vue.selectgrade);
					form.render(null, 'test1');
				});

			});

			/*layui.use('element', function() {
				var $ = layui.jquery,
					element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

				//触发事件
				var active = {
					tabChange: function() {
						//切换到指定Tab项
						element.tabChange('demo', '22'); //切换到：用户管理
					}
				};

				$('.site-demo-active').on('click', function() {
					var othis = $(this),
						type = othis.data('type');
					active[type] ? active[type].call(this, othis) : '';
				});

			});*/
		</script>

	</body>

</html>